<template>
    <div ref="recommend"> 
        <div class="m-header-r flex-box">
            <div class="flex-box flex-f1 flex-ac">
                <div class="head-lr" v-if="!bfUserInfo"></div>
            </div>
            <h1 class="m-h-text">必发彩票</h1>
            <div class="flex-box flex-f1 flex-pe">
                <div class="flex-box flex-ac head-lr" v-if="!bfUserInfo">
                    <div class="head-btn" @click="loginOrRegister('/login')">登录</div>
                    <div>|</div>
                    <div class="head-btn" @click="loginOrRegister('/register')">注册</div>
                </div>
            </div>
        </div>
        <mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
            <div class="bor-b-g">
                <!-- 图片轮播开始 -->
                <div class="wrapper" v-if="typeList.length > 0">
                    <swiper :options="swiperOption">
                        <swiper-slide v-for='item of banners' :key="item.no">
                            <img :src="item.image" class="swiper-img">
                        </swiper-slide>
                        <div class="swiper-pagination" slot="pagination"></div>
                    </swiper>
                </div>
                <!-- 图片轮播结束 -->
                <!-- 公告开始 -->
                <div class="flex-box flex-ac bg-c-wh bor-b-g">
                    <div class="iconSize-1 notice"></div>
                    <marquee>
                        <marquee-item class="tx-s-14 no-wrap" item-height="1.25rem" v-for="(item, i) in notices" :key="i">{{ item.content }}</marquee-item>
                    </marquee>
                </div>
                <!-- 公告结束 -->
                <!-- tab开始  v-show="typeList.length > 1"-->
                <div class="flex-box game-type">
                    <div class="tx-s-14 bg-c-wh" v-for="(item, i) in typeList" :key="i" @click="toggleType(i)"> 
                        <img class="iconSize-4 mar_game" :imgurl="item.logo" :src="loadingImg"/>
                        <p class="tx-c mar-b-25" :class="{'tx-c-r' : picked == i}">{{ item.title }}</p>
                        <div class="flex-box flex-pc arrow-h">
                            <div class="arrow-btm" v-show="picked == i"></div>
                        </div>
                    </div>
                </div> 
                <!-- tab结束 -->
                <div v-if="typeList != ''">
                    <!-- 彩种开始 -->
                    <div v-show="picked == 0">
                        <div class="flex-box flex-wp">
                            <div class="wd-33 tx-c" v-for="(item, i) in typeList[0].childlist" :key="i" @click="toLottery(item.id)"> 
                                <img class="iconSize-4 mar_cp" :imgurl="item.logo" :src="loadingImg"/>
                                <p class="tx-s-14 mar-b">{{ item.title }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- 彩种结束 -->
                    <!-- 游戏开始 -->
                    <div v-for="(arr, i) in gameArr" :key="i">
                        <div v-show="picked == i+1">
                            <div class="flex-box flex-wp tx-c">
                                <div :class="arr[0]" v-for="(item, i) in typeList[i+1].childlist" :key="i" @click="toGame(item)"> 
                                    <img :class="arr[1]" class="mar_cp" :imgurl="item.logo" :src="loadingImg"/>
                                    <p class="tx-s-14 mar-b">{{ item.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 游戏结束 -->
                </div>
            </div> 
        </mescroll-vue>
    </div>
</template> 
<script type="text/ecmascript-6"> 
import 'common/css/user.css'
import { mapGetters } from 'vuex'
import { Marquee, MarqueeItem } from 'vux'
import MescrollVue from 'mescroll.js/mescroll.vue'
import Trans from '../common/js/eventTrans'
import { isDefine } from '../common/js/common'
import { homeData, checkName, gameOpen } from '../common/js/axiosUtil'
import { lotSelObj } from '../common/js/data'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    name: 'HomeSwiper',
    data () {
        return { 
            picked : 0,
            banners : [], // 轮播图片资源
            notices : [], // 公告列表
            typeList : '',
            mescroll: null, // mescroll实例对象
            //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
            mescrollUp: { // 上拉加载的配置
                lazyLoad: {
                    use: true // 是否开启懒加载,默认false
                },
                callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
                htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
                noMoreSize: 5 //如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;
            },
            lotType : [
                '', 'cqssc', 'bjpk10', 'xglhc', 'yfssc', 'yfsc', 'bflhc', 'xjssc', 'bfefc', 'bfwfc','gdsyxw', 'gdklsf', 'bjkb', 'jstb', 'pcdd'
            ],
            lotPath : lotSelObj,
            gameArr : [
                ['wd-33', 'iconSize-6'],
                ['wd-50', 'iconSize-9'],
                ['wd-50', 'iconSize-9'],
                ['wd-33', 'iconSize-6']
            ],
            loadingImg : require('../common/image/jzsb.png'), // 懒加载占位图
            //设置属性
            swiperOption:{
                //显示分页
                pagination: {
                    el: '.swiper-pagination'
                },
                //设置自动播放速度
                autoplay: {
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                //开启无限循环
                loop: true,
            }
        }
    },
    created () {
        this.checkUserkName()
    },
    mounted () {
        var _this = this
        Trans.$on('checkUserkName', function (msg) {
            _this.checkUserkName()
        })
    },
    methods: {
        // 登录、注册
        loginOrRegister (page) {
            this.$router.push(page) 
        },
        // 切换游戏
        toggleType (i) {
            this.picked = i
        },
        // 游戏
        toGame (data) {
            if(data.list){
                this.$router.push({
                    path: '/gameList',
                    query: {
                        title: data.title,
                        list: data.list,
                        data: data
                    }
                })
            }else{
                this.$toast('加载中...', 2000)
                let params = this.$params(1)
                params.append('id', data.id)
                gameOpen(params)
                .then((response)=> {
                    this.$toastClose()
                    if(response.data.code == 200){
                        // 打开游戏页面
                        this.$router.push({
                            path: '/gameHtml',
                            query: {
                                title: data.title,
                                src: response.data.data.url
                            }
                        })
                    }else{
                        this.$logAgain(response.data.msg)
                    }
                })
                .catch((error)=> {
                    this.$toast('请求服务失败', 2000)
                })
            }
        },
        // 购彩
        toLottery (id) {
            // 初始化购彩数据
            this.$store.state.lotData = null
            // 是否登录
            if(!isDefine(this.bfUserInfo)){
                this.$router.push('/login')
            }else{
                // 进入购彩界面
                let type = this.lotType[id]
                if(isDefine(type)){
                    this.$store.state.lotType = type
                    this.$router.push('/'+this.lotPath[type])
                }else{
                    this.$toast('尽请期待', 2000)
                }
            }
        },
        // 获取大厅数据
        getHomeData () {
            let params = this.$params(0)
            homeData(params)
            .then((response)=> { 
                if(response.data.code == "200"){
                    let data = response.data.data
                    // 测试走马灯效果
                    // data.notices = [{content: "想中大奖吗？赶快来买啊！必发彩票，买了必发哦。"},{content: "测试"}]
                    this.banners = data.banners
                    this.notices = data.notices
                    this.typeList = data.typeList
                    this.$store.state.serviceQQ = data.contact.qq
                    if(isDefine(data.msglist)){ 
                        if(this.$store.state.loginAlert){
                            // 更新loginAlert数据
                            this.$store.state.loginAlert = false
                            const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向 
                            this.$vux.confirm.show({
                                // 组件除show外的属性
                                content: data.msglist[0].content, 
                                confirmText: '知道了', 
                                showCancelButton: false,
                                hideOnBlur: true,
                                onCancel () { 
                                },
                                onConfirm () {
                                }
                            })
                        }
                    }
                } else {
                    this.$logAgain(response.data.msg)
                }
                this.mescroll.endSuccess(1)
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
                this.mescroll.endErr()
            })
        },
        // 查询是否已填写真实姓名和qq
        checkUserkName () {
            let params = this.$params(1)
            checkName(params)
            .then((response)=> {
                if(response.data.code == "-200"){
                    // 更新bindingName数据
                    this.$store.state.bindingName = false
                    this.$router.push('/bindingName')
                }else if(response.data.code == "200"){ 
                        // 更新bindingName数据
                        this.$store.state.bindingName = true
                }else{
                    this.$logAgain(response.data.msg)
                }
            })
            .catch((error)=> {
                this.$toast('请求服务失败', 2000)
            })
        },
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit (mescroll) {
            this.mescroll = mescroll 
        },
        // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
        upCallback () {
            this.getHomeData()
        }
    },
    components: { 
        MescrollVue,
        Marquee,
        MarqueeItem,
        swiper,
        swiperSlide
    },
    computed: {
        ...mapGetters([
            'bfUserInfo'
        ])
    }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
/*通过fixed固定mescroll的高度*/
.mescroll
    position: fixed
    top: 2.75rem
    bottom: 3.25rem
    height: auto 
    background: $color-f0
.noticeBox
    height: 1.25rem
    line-height: 1.25rem
    overflow: hidden
.notice
    background-image: url('../common/image/sy_icon_gonggao.png')
    margin: .5rem .75rem
.notioce-tx
    line-height: 1.25rem
    font-size: $fonts-14
.game-type 
    overflow: auto 
.game-type::-webkit-scrollbar
    display: none 
.arrow-h
    height: .5rem
    background: $color-f0
.arrow-btm 
    width: 1rem
    height: .5rem
    background-size: 100% 100%
    background-image: url('../common/image/bottom.png')
.mar_game
    margin: 1rem 1.25rem .5rem 1.25rem
.mar_cp
    margin: .5rem auto
.mar-b
    margin-bottom: .75rem
.head-lr
    width: 5rem
    color: white
    font-size: $fonts-14
.head-btn
    line-height: 2.75rem
    padding: 0 .25rem
.wrapper >>> .swiper-pagination-bullet
    height: .375rem
    width: .375rem
    position: relative
    top: -1.25rem
.wrapper >>> .swiper-pagination-bullet-active
    background: red
    height: .375rem
    width: .375rem 
.wrapper
    overflow: hidden
    width: 100%
    height: 0
    padding-bottom: 36.75%
    background: #eee
    .swiper-img
        width: 100%
</style>
